<template>
  <nuxt-link :to="{ path: 'detail', query: { id: meta.id } }">
    <el-card :body-style="{ padding: '0px' }" shadow="hover" class="card">
      <div class="imgbox"><img :src="meta.img" class="image" /></div>
      <div style="padding: 14px;">
        <span class="title">{{ meta.name }}</span>
        <div class="bottom clearfix">
          <span class="attr"
            ><p v-for="(item, idx) in meta.attr" :key="idx">
              {{ item }} |
            </p></span
          >
          <span class="aprice">￥{{ meta.price }}元起</span>
          <el-tooltip content="加入购物车" placement="bottom" effect="light">
            <el-button
              type="success"
              round
              icon="el-icon-shopping-cart-2"
              size="small"
            ></el-button>
          </el-tooltip>
        </div>
      </div>
    </el-card>
  </nuxt-link>
</template>

<script>
export default {
  props: {
    meta: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style>
@import "@/assets/css/products/aproduct.scss";
</style>
